<!DOCTYPE html>
<html>

<head>
  <title>浏览器的底层渲染机制</title>
  <meta charset='utf-8'>
  <link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'>
  <style>
    .note-content {
      font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", SimSun, Song, sans-serif;
    }
  </style>
</head>

<body>
  <div id='preview-contents' class='note-content'>


    <h4 id="浏览器的底层渲染机制">浏览器的底层渲染机制</h4>

    <p>【DOM树】</p>



    <p><img longdesc="./1591177041567.png" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>

    <p>【CSSOM树】</p>



    <p><img longdesc="./1591177112117.png" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>

    <p>【Render-Tree渲染树】</p>



    <p><img longdesc="./1591177276498.png" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>

    <p>总结步骤：</p>

    <ul>
      <li>
        <p>处理 HTML 标记，构建 DOM 树</p>
      </li>
      <li>
        <p>处理 CSS 标记，构建 CSSOM 树</p>
      </li>
      <li>
        <p>将 DOM 树和 CSSOM 树融合成渲染树</p>
      </li>
      <li>
        <p>根据生成的渲染树，计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流 =&gt; 布局（Layout）或 重排（reflow）</p>
      </li>
      <li>
        <p>根据渲染树以及回流得到的几何信息，得到节点的绝对像素 =&gt; 绘制（painting）</p>
      </li>
    </ul>



    <p><img longdesc="./1591177351797.png" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>

    <p>优化方案：</p>

    <ul>
      <li>
        <p>标签语义化和避免深层次嵌套</p>
      </li>
      <li>
        <p>CSS选择器渲染是从右到左</p>
      </li>
      <li>
        <p>尽早尽快地把CSS下载到客户端（充分利用HTTP多请求并发机制）</p>

        <ul>
          <li>
            <p><code>style</code></p>
          </li>
          <li>
            <p><code>link</code></p>
          </li>
          <li>
            <p><code>@import</code></p>
          </li>
          <li>
            <p>放到顶部</p>
          </li>
        </ul>
      </li>
      <li>
        <p>避免阻塞的JS加载</p>

        <ul>
          <li>
            <p><code>async</code></p>
          </li>
          <li>
            <p><code>defer</code></p>
          </li>
          <li>
            <p>放到底部 <br>
              <img longdesc="./1591177436976.png" alt="Alt text" title="" type="image/png"
                src=""
                class="">
            </p>

            <blockquote>
              <p>Webkit浏览器预测解析：chrome的预加载扫描器html-preload-scanner通过扫描节点中的 “src” ,
                “link”等属性，找到外部连接资源后进行预加载，避免了资源加载的等待时间，同样实现了提前加载以及加载和执行分离。</p>
            </blockquote>
          </li>
        </ul>
      </li>
      <li>
        <p>减少DOM的回流和重绘 <br>
          <img longdesc="./1591177504586.png" alt="Alt text" title="" type="image/png"
            src=""
            class=""> <br>
          <img longdesc="./1591177532608.png" alt="Alt text" title="" type="image/png"
            src=""
            class=""> <br>
          <img longdesc="./1591177544632.png" alt="Alt text" title="" type="image/png"
            src=""
            class=""> <br>
          <img longdesc="./1591177552016.png" alt="Alt text" title="" type="image/png"
            src=""
            class="">
        </p>
      </li>
    </ul>
  </div>
</body>

</html>